<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-22 14:43:01
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiFullcalendar\uiFullcalendar.vue
 * CIMC-V2
-->
<template>
  <FullCalendar :options="calendarOptions" :style="{ height: domHeight }">
    <!-- 自定义事件渲染 -->
    <template #eventContent="arg">
      <el-popover trigger="hover" :width="300">
        <template #reference>
          <div class="p-2" :class="statusObj[arg.event.extendedProps.status].className">
            <p class="truncate">{{ arg.event.title }}</p>
            <p class="truncate">{{ createDateTimeStr(arg.event.start, true) + ' - ' + createDateTimeStr(arg.event.end, true) }}</p>
            <p class="truncate">{{ statusObj[arg.event.extendedProps.status].text }}</p>
          </div>
        </template>
        <div>
          <div class="flex mb-3">
            <span class="w-[80px] text-right">{{ translateTitle('Ve.elements.标题') }}</span>
            <p>{{ arg.event.title }}</p>
          </div>
          <div class="flex mb-3">
            <span class="w-[80px] text-right">{{ translateTitle('Ve.elements.开始时间') }}</span>
            <p>{{ createDateTimeStr(arg.event.start) }}</p>
          </div>
          <div class="flex mb-3">
            <span class="w-[80px] text-right">{{ translateTitle('Ve.elements.结束时间') }}</span>
            <p>{{ createDateTimeStr(arg.event.end) }}</p>
          </div>
          <div class="flex mb-3">
            <span class="w-[80px] text-right">{{ translateTitle('Ve.elements.状态') }}</span>
            <p :class="statusObj[arg.event.extendedProps.status].className.split(1)">{{ statusObj[arg.event.extendedProps.status].text }}</p>
          </div>
        </div>
      </el-popover>
    </template>
  </FullCalendar>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import '@fullcalendar/core/vdom' // solves problem with Vite
  import FullCalendar from '@fullcalendar/vue3'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'
  import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import { domHeight } from '@ve/utils/domHeight'
  export default defineComponent({
    name: 'UiFullcalendar',
    components: {
      FullCalendar,
    },
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        statusObj: {
          0: {
            text: this.translateTitle('Ve.elements.预约成功'),
            className: 'bg-green-100 text-green-600',
          },
          1: {
            text: this.translateTitle('Ve.elements.进行中'),
            className: 'bg-yellow-100 text-yellow-600',
          },
          2: {
            text: this.translateTitle('Ve.elements.已完成'),
            className: 'bg-blue-100 text-blue-600',
          },
        },
        calendarOptions: {
          plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, resourceTimeGridPlugin, resourceTimelinePlugin],
          initialView: 'resourceTimeGridDay', // 视图类型
          locale: 'zh-cn', // 语言选项
          // 头部配置
          headerToolbar: {
            left: 'prev,next', // 左侧按钮选项
            center: 'title', // 中间区域
            right: 'dayGridMonth,resourceTimelineWeek,resourceTimeGridDay', // 右侧区域
          },
          // 按钮文字
          buttonText: {
            today: this.translateTitle('Ve.elements.今天'),
            month: this.translateTitle('Ve.elements.月'),
            week: this.translateTitle('Ve.elements.周'),
            day: this.translateTitle('Ve.elements.日'),
            list: this.translateTitle('Ve.elements.表'),
          },
          resources: [
            { id: '1', title: 'D01' },
            { id: '2', title: 'D02' },
            { id: '3', title: 'D03' },
            { id: '4', title: 'D04' },
            { id: '5', title: 'D05' },
            { id: '6', title: 'D06' },
            { id: '7', title: 'D07' },
            { id: '8', title: 'D08' },
            { id: '9', title: 'D09' },
          ],
          // 初始就存在的事件
          initialEvents: [
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 08:00:00',
              end: '2022-08-09 10:00:00',
              extendedProps: {
                status: '0',
              },
              resourceId: '1',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 09:00:00',
              end: '2022-08-09 10:00:00',
              extendedProps: {
                status: '1',
              },
              resourceId: '2',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 09:30:00',
              end: '2022-08-09 11:30:00',
              extendedProps: {
                status: '2',
              },
              resourceId: '3',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 12:30:00',
              end: '2022-08-09 14:00:00',
              extendedProps: {
                status: '0',
              },
              resourceId: '4',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 14:00:00',
              end: '2022-08-09 16:00:00',
              extendedProps: {
                status: '1',
              },
              resourceId: '5',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 15:00:00',
              end: '2022-08-09 16:30:00',
              extendedProps: {
                status: '2',
              },
              resourceId: '6',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 13:00:00',
              end: '2022-08-09 15:00:00',
              extendedProps: {
                status: '0',
              },
              resourceId: '7',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 08:30:00',
              end: '2022-08-09 10:00:00',
              extendedProps: {
                status: '1',
              },
              resourceId: '3',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 08:00:00',
              end: '2022-08-09 11:00:00',
              extendedProps: {
                status: '2',
              },
              resourceId: '5',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 08:00:00',
              end: '2022-08-09 14:00:00',
              extendedProps: {
                status: '0',
              },
              resourceId: '7',
            },
            {
              id: 1,
              title: ' 闻春礼食品公司',
              start: '2022-08-09 07:00:00',
              end: '2022-08-09 10:00:00',
              extendedProps: {
                status: '1',
              },
              resourceId: '9',
            },
            {
              id: 1,
              title: '会议222',
              start: '2022-08-11 10:00:00',
              end: '2022-08-11 14:00:00',
              extendedProps: {
                status: '1',
              },
              resourceId: '2',
            },
          ],
          // eventColor: 'rgba(0,0,0,0)',
          editable: true, // 是否可拖拽
          selectable: true, // 是否可选择添加
          allDayText: '全天', // 全天行的文本显示内容
          slotMinTime: '00:00:00', // 日开始时间
          slotMaxTime: '24:00:00', // 日结束时间
          resourceAreaHeaderContent: '月台', // 多项项目名称
          resourceAreaWidth: '15%', // 多项项目默认宽度
        },
        domHeight: 500,
      }
    },
    computed: {
      getExtension() {
        return this.info.extension
      },
    },
    created() {
      // 计算高度
      this.getHeight()
      this.$sub(`SplitpaneResized_${this.previewPageId()}`, () => {
        this.getHeight()
      })
      this.calendarOptions.initialView = this.getExtension.initialView.value
      this.calendarOptions.editable = this.getExtension.editable.value
      this.calendarOptions.selectable = this.getExtension.selectable.value
      this.calendarOptions.slotMinTime = this.getExtension.slotMinTime.value
      this.calendarOptions.slotMaxTime = this.getExtension.slotMaxTime.value
    },
    mounted() {},
    methods: {
      translateTitle,
      getHeight() {
        let _domHeight = domHeight(this)
        if (_domHeight > 0) {
          this.domHeight = _domHeight
        }
      },
      createDateTimeStr(dateVal, onlyTime = false) {
        const fullYear = dateVal.getFullYear()
        const month = dateVal.getMonth() + 1 < 10 ? `0${dateVal.getMonth() + 1}` : dateVal.getMonth() + 1
        const day = dateVal.getDate() < 10 ? `0${dateVal.getDate()}` : dateVal.getDate()
        const hours = dateVal.getHours() < 10 ? `0${dateVal.getHours()}` : dateVal.getHours()
        const minutes = dateVal.getMinutes() < 10 ? `0${dateVal.getMinutes()}` : dateVal.getMinutes()
        const seconds = dateVal.getSeconds() < 10 ? `0${dateVal.getSeconds()}` : dateVal.getSeconds()
        if (onlyTime) {
          return `${hours}:${minutes}`
        }
        return `${fullYear}-${month}-${day} ${hours}:${minutes}:${seconds}`
      },
    },
  })
</script>
<style lang="scss" scoped>
  // :deep() .fc-license-message {
  //   display: none;
  // }
</style>
